<html lang="en"><head>
    <meta charset="UTF-8">

    <meta name="apple-mobile-web-app-title" content="CodePen">

    <title></title>
    <link rel="stylesheet" href="./style.css">
    <!--<script src="https://use.typekit.net/ytd4ine.js"></script>-->
    <!--<script>try{Typekit.load({ async: true });}catch(e){}</script>-->
</head>
<body translate="no">
<div id="settings" ontouchstart="">
    <input checked="" class="nav" name="nav" type="radio">
    <span class="nav">Profile</span>
    <input class="nav" name="nav" type="radio">
    <span class="nav">Account</span>
    <input class="nav" name="nav" type="radio">
    <span class="nav">Privacy</span>
    <input class="nav" name="nav" type="radio">
    <span class="nav">Advanced</span>
    <main class="content">
        <section id="profile">
            <form>
                <ul>
                    <li class="large padding avatar">
                        <span style="background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/345377/selca-square.jpg');"></span>
                        <div>
                            <fieldset class="material-checkbox">
                                <div>
                                    <input checked="" type="checkbox">
                                    <div class="check">
                    <span>
                      <svg viewBox="0 0 24 24">
                        <g>
                          <line x1="4.5" x2="9.24" y1="12.5" y2="17.24"></line>
                          <line x1="9.24" x2="19.76" y1="17.24" y2="6.73"></line>
                        </g>
                        <g>
                          <line x1="4.5" x2="9.24" y1="12.5" y2="17.24"></line>
                          <line x1="9.24" x2="19.76" y1="17.24" y2="6.73"></line>
                        </g>
                      </svg>
                    </span>
                                        <label>Use Gravatar</label>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset class="material-button">
                                <div>
                                    <button>Select File</button>
                                </div>
                            </fieldset>
                        </div>
                    </li>
                    <li>
                        <fieldset class="material">
                            <div>
                                <input required="" type="text" value="Gabrielle Wee">
                                <label>Name</label>
                                <hr>
                            </div>
                        </fieldset>
                    </li>
                    <li>
                        <fieldset class="material">
                            <div>
                                <input required="" type="text">
                                <label>Location</label>
                                <hr>
                            </div>
                        </fieldset>
                    </li>
                    <li>
                        <fieldset class="material">
                            <div>
                                <input required="" type="text">
                                <label>Title</label>
                                <hr>
                            </div>
                        </fieldset>
                    </li>
                    <li>
                        <fieldset class="material">
                            <div>
                                <input required="" type="text">
                                <label>Website</label>
                                <hr>
                            </div>
                        </fieldset>
                    </li>
                    <li class="large">
                        <fieldset class="material">
                            <div>
                                <input required="" type="text">
                                <label>About</label>
                                <hr>
                            </div>
                        </fieldset>
                    </li>
                    <li class="large padding">
                        <fieldset class="material-button center">
                            <div>
                                <input class="save" type="submit" value="Save">
                            </div>
                        </fieldset>
                    </li>
                </ul>
            </form>
        </section>
        <section id="account">
            <form>
                <ul>
                    <li>
                        <fieldset class="material">
                            <div>
                                <input required="" type="text" value="email@domain.com">
                                <label>Email</label>
                                <hr>
                            </div>
                        </fieldset>
                    </li>
                    <li>
                        <fieldset class="material">
                            <div>
                                <input required="" type="text">
                                <label>Username</label>
                                <hr>
                            </div>
                        </fieldset>
                    </li>
                    <li>
                        <fieldset class="material">
                            <div>
                                <input required="" type="password">
                                <label>Password</label>
                                <hr>
                            </div>
                        </fieldset>
                    </li>
                    <li>
                        <fieldset class="material">
                            <div>
                                <input required="" type="password">
                                <label>Confirm Password</label>
                                <hr>
                            </div>
                        </fieldset>
                    </li>
                    <li class="padding">
                        <fieldset class="material-button">
                            <div>
                                <button class="connect gh connected">
                                    <span>Unlink Github Account</span>
                                </button>
                            </div>
                        </fieldset>
                    </li>
                    <li class="padding">
                        <fieldset class="material-button">
                            <div>
                                <button class="connect tw">
                                    <span>Link Twitter Account</span>
                                </button>
                            </div>
                        </fieldset>
                    </li>
                    <li class="padding">
                        <fieldset class="material-button">
                            <div>
                                <button class="connect fb">
                                    <span>Link Facebook Account</span>
                                </button>
                            </div>
                        </fieldset>
                    </li>
                    <li class="padding">
                        <fieldset class="material-button">
                            <div>
                                <button class="connect li">
                                    <span>Link LinkedIn Account</span>
                                </button>
                            </div>
                        </fieldset>
                    </li>
                    <li class="large padding">
                        <fieldset class="material-button center">
                            <div>
                                <input class="save" type="submit" value="Save">
                            </div>
                        </fieldset>
                    </li>
                </ul>
            </form>
        </section>
        <section class="upcoming" id="privacy">
            <h1>Coming&nbsp;soon!</h1>
        </section>
        <section class="upcoming" id="advanced">
            <h1>Coming&nbsp;soon!</h1>
        </section>
    </main>
</div>

</body>
<script src="script.js"></script>
</html>